<template>
  <div class='login'>
    <h1 class="title">
      登录
    </h1>
    <van-form @submit="onSubmit">
      <van-field v-model="loginForm.username" name='user' type="tel" label="手机号" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="loginForm.password" name='password' type="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div class="version">
      欢迎使用公开版本{{app.version}}
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  props: {},
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  components: {},
  created () { },
  mounted () { },
  methods: {
    onSubmit (val) {
      // 登录
      this.$store.dispatch('SET_USERINFO_ACTION').then(
        res => {
          this.$router.replace('/')
        }
      ).catch(() => {
        this.$toast('登入失败')
      })
    }
  },
  watch: {},
  computed: {
    ...mapGetters(['app'])
  }
}
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  padding: 20px 0;
}
.version {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin: 20px 0;
}
</style>
